<template>
  <div class="project-list">
    <h2>项目仓库</h2>
    <loading-spinner v-if="loading"></loading-spinner>
    <p v-if="noProjects">目前还没有项目。</p>
    <table v-if="projects.length > 0">
      <thead>
        <tr>
          <th>项目名称</th>
          <th>项目描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="project in projects" :key="project.id">
          <td>{{ project.name }}</td>
          <td>{{ project.description }}</td>
          <td>
            <button @click="viewProjectDetails(project.id)">项目详情</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="createProject()">新建项目</button>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios'; // 确保已经安装了 axios
import LoadingSpinner from '../components/LoadingSpinner.vue'; // 确保已经创建了 LoadingSpinner 组件

export default defineComponent({
  components: { LoadingSpinner },
  data() {
    return {
      projects: [] as any[],
      loading: true as boolean,
      error: null as string | null,
      noProjects: false as boolean
    };
  },
  methods: {
    viewProjectDetails(id: number) {
      this.$router.push(`/project-management/details/${id}`);
    },
    createProject() {
      this.$router.push('/project-management/create');
    },
    async fetchProjects() {
      try {
        const response = await axios.get('http://localhost:8080/project/list');

        // 获取 data 字段
        const data = response.data.data;

        // 确保 data 是数组
        if (!Array.isArray(data)) {
          throw new Error('Received data is not an array');
        }

        this.projects = data;
        if (this.projects.length === 0) {
          this.noProjects = true;
        }
      } catch (error) {
        if (axios.isAxiosError(error)) {
          // 检查是否为 Axios 错误
          if (error.response?.status === 500) {
            this.error = '服务器内部错误，请联系管理员。';
          } else if (error.response?.status === 404) {
            this.error = '找不到项目列表资源。';
          } else {
            this.error = '无法获取项目列表，请稍后再试。';
          }
        } else {
          this.error = '网络连接失败，请检查网络设置。';
        }
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    console.log('ProjectList mounted');
    this.fetchProjects();
  }
});
</script>

<style scoped>
.project-list {
  max-width: 600px;
  margin: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

th,
td {
  padding: 0.5em;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

button {
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .project-list {
    max-width: 100%;
  }

  table {
    display: block;
    overflow-x: auto;
  }
}

/* 空状态提示 */
p {
  text-align: center;
  font-style: italic;
  color: #999;
}
</style>